<template>
  <div class="item" style="height: 100% ; width: 100%">
    <div id="Gauge" :style="{ width: '100%', height: '100%' ,}"></div>
  </div>
</template>


<script>
import request from "@/util/request.js";
import * as echarts from "echarts";
export default {
  name: "Gauge",
  // components: {Pie,EDigitalFlop, Map_1, EFullScreenContainer},
  data(){
    return{
      chartInstance: null,
      echart:echarts,
      option:{}
    }
  },
  mounted() {
    this.initChart();
    this.getData();
  },
  watch: {
    data() {
      this.getData();
    }
  },
  methods:{
    initChart() {
      console.log("initChart")
      this.chartInstance = this.echart.init(document.getElementById("Gauge"),);
    },
    async getData() {
      console.log("getData")
      await this.updateData();
    },

    updateData(){
      this.option={
        title: {
          text: '及格率',
          left: 'center'
        },
        series: [
          {
            type: 'gauge',
            progress: {
              show: true,
              width: 18
            },
            axisLine: {
              lineStyle: {
                width: 18
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              length: 15,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            axisLabel: {
              distance: 25,
              color: '#999',
              fontSize: 20
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 25,
              itemStyle: {
                borderWidth: 10
              }
            },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              fontSize: 50,
              offsetCenter: [0, '70%']
            },
            data: [
              {
                value: 90.2
              }
            ]
          }
        ]
      };
      this.chartInstance.setOption(this.option,true)
    },

  },
};

</script>

<style scoped>

</style>